<template>
  <!-- 研究成果tab切换表格模块 -->
  <div class="yjcgTable">
    <div class="search">
      <!-- 类目选择部分 -->
      <!-- <div class="btn">
        所属类目：
        <el-button :type="type0" @click="btn0" size="mini">全部</el-button>
        <el-button :type="type1" @click="btn1" size="mini">类目一</el-button>
        <el-button :type="type2" @click="btn2" size="mini">类目二</el-button>
        <el-button :type="type3" @click="btn3" size="mini">类目三</el-button>
        <el-button :type="type4" @click="btn4" size="mini">类目四</el-button>
        <el-button :type="type5" @click="btn5" size="mini">类目五</el-button>
        <el-button :type="type6" @click="btn6" size="mini">类目六</el-button>
        <el-button :type="type7" @click="btn7" size="mini">类目七</el-button>
        <el-button :type="type8" @click="btn8" size="mini">类目八</el-button>
        <el-button :type="type9" @click="btn9" size="mini">类目九</el-button>
        <el-button :type="type10" @click="btn10" size="mini">类目十</el-button>
      </div> -->
      <div class="bottom_box">
        <!-- 时间选择部分 -->
        <div class="time_box">
          <span>选择时间：</span>
          <el-date-picker
            class="time_picker"
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
        <!-- 搜索内容部分 -->
        <div class="search_text">
          <el-input v-model="inputVal" placeholder="请输入内容"></el-input>
          <el-button type="primary">查询</el-button>
          <el-button type="default">批量下载</el-button>
        </div>
      </div>
    </div>

    <!-- 表格部分 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="标题" prop="title"> </el-table-column>
      <el-table-column prop="author" label="作者"> </el-table-column>
      <el-table-column prop="date" label="日期" sortable width="180"> </el-table-column>
      <el-table-column
        prop="downNum"
        :render-header="icons"
        label="下载次数"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >下载</el-button
          >
          <el-button type="text" size="small" @click="readClick(scope.row)"
            >阅读</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页部分 -->
    <!-- <el-pagination
      style="margin-left: 580px; margin-top: 30px"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="100"
      layout="  prev, pager, next,sizes, jumper"
      :total="400"
    >
    </el-pagination> -->
    <!--         :page-sizes="pageSizes" -->
    <div class="page_box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="aPageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
// import PdfCom from "@/components/PdfCom";

export default {
  data() {
    return {
      // 分页器选项:
      currentPage: 0, //起始页
      pageSizes: [8, 10, 50, 100], //分页选项(已隐藏)
      aPageSize: 10, //默认选中的每页几个,
      // total: 0, //总个数
      pageArr: [],
      value1: "",
      inputVal: "",
      type0: "primary",
      type1: "text",
      type2: "text",
      type3: "text",
      type4: "text",
      type5: "text",
      type6: "text",
      type7: "text",
      type8: "text",
      type9: "text",
      type10: "text",
      tableData: [
        {
          title: "拜登人物管理分析",
          author: "张某某",
          date: "2020-11-10",
          downNum: "12000",
        },
        {
          title: "李耿浩人物管理分析",
          author: "张某某",
          date: "2020-11-10",
          downNum: "12000",
        },
      ],
    };
  },
  components: {
    // PdfCom,
  },
  methods: {
    handleSelectionChange() {},
    // 操作中下载按钮 点击事件
    handleClick(num) {
      // console.log(num);
    },
    // 操作中阅读按钮  点击事件
    readClick(num) {
      // console.log(num);
      this.$emit("clickPDF", true);
      // // 从哪里来的: 研究成果
      // localStorage.whereGo = "researchResult";
      // this.$router.push("/mainDetail/tableDetail");
    },
    icons(h, { column, $index }) {
      return h("div", [
        h(
          "span",
          {
            slot: "content",
          },
          "下载次数"
        ),
        h("i", {
          class: "el-icon-download",
          style: "margin-left:5px",
        }),
      ]);
    },
    // 所属类目 按钮点击事件
    btn0() {
      this.type0 = "primary";
      this.type1 = "text";
      this.type2 = "text";
      this.type3 = "text";
      this.type4 = "text";
      this.type5 = "text";
      this.type6 = "text";
      this.type7 = "text";
      this.type8 = "text";
      this.type9 = "text";
      this.type10 = "text";
    },
    btn1() {
      this.type1 = "primary";
      this.type0 = "text";
      this.type2 = "text";
      this.type3 = "text";
      this.type4 = "text";
      this.type5 = "text";
      this.type6 = "text";
      this.type7 = "text";
      this.type8 = "text";
      this.type9 = "text";
      this.type10 = "text";
    },
    btn2() {
      this.type2 = "primary";
      this.type1 = "text";
      this.type0 = "text";
      this.type3 = "text";
      this.type4 = "text";
      this.type5 = "text";
      this.type6 = "text";
      this.type7 = "text";
      this.type8 = "text";
      this.type9 = "text";
      this.type10 = "text";
    },
    btn3() {
      this.type3 = "primary";
      this.type1 = "text";
      this.type2 = "text";
      this.type0 = "text";
      this.type4 = "text";
      this.type5 = "text";
      this.type6 = "text";
      this.type7 = "text";
      this.type8 = "text";
      this.type9 = "text";
      this.type10 = "text";
    },
    btn4() {
      this.type4 = "primary";
      this.type1 = "text";
      this.type2 = "text";
      this.type3 = "text";
      this.type0 = "text";
      this.type5 = "text";
      this.type6 = "text";
      this.type7 = "text";
      this.type8 = "text";
      this.type9 = "text";
      this.type10 = "text";
    },
    btn5() {
      this.type5 = "primary";
      this.type1 = "text";
      this.type2 = "text";
      this.type3 = "text";
      this.type4 = "text";
      this.type0 = "text";
      this.type6 = "text";
      this.type7 = "text";
      this.type8 = "text";
      this.type9 = "text";
      this.type10 = "text";
    },
    btn6() {
      this.type6 = "primary";
      this.type1 = "text";
      this.type2 = "text";
      this.type3 = "text";
      this.type4 = "text";
      this.type5 = "text";
      this.type0 = "text";
      this.type7 = "text";
      this.type8 = "text";
      this.type9 = "text";
      this.type10 = "text";
    },
    btn7() {
      this.type7 = "primary";
      this.type1 = "text";
      this.type2 = "text";
      this.type3 = "text";
      this.type4 = "text";
      this.type5 = "text";
      this.type6 = "text";
      this.type0 = "text";
      this.type8 = "text";
      this.type9 = "text";
      this.type10 = "text";
    },
    btn8() {
      this.type8 = "primary";
      this.type1 = "text";
      this.type2 = "text";
      this.type3 = "text";
      this.type4 = "text";
      this.type5 = "text";
      this.type6 = "text";
      this.type7 = "text";
      this.type0 = "text";
      this.type9 = "text";
      this.type10 = "text";
    },
    btn9() {
      this.type9 = "primary";
      this.type1 = "text";
      this.type2 = "text";
      this.type3 = "text";
      this.type4 = "text";
      this.type5 = "text";
      this.type6 = "text";
      this.type7 = "text";
      this.type8 = "text";
      this.type0 = "text";
      this.type10 = "text";
    },
    btn10() {
      this.type10 = "primary";
      this.type1 = "text";
      this.type2 = "text";
      this.type3 = "text";
      this.type4 = "text";
      this.type5 = "text";
      this.type6 = "text";
      this.type7 = "text";
      this.type8 = "text";
      this.type9 = "text";
      this.type0 = "text";
    },
  },
};
</script>

<style lang="scss" scoped>
.yjcgTable {
  .search {
    background: #fff;
    margin-bottom: 20px;
    padding: 10px 30px;
    box-sizing: border-box;
    .btn {
      border-bottom: 1px dashed #999;
      padding-bottom: 10px;
      button {
        margin-right: 20px;
      }
    }
    .bottom_box {
      margin-top: 10px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      // .time {
      //   margin-top: 20px;
      //   height: 40px;
      // }
      .time_box {
        box-sizing: border-box;
        height: 100%;
        // width: 300px;
        .el-date-editor {
          // width: 50%;
          padding: 10px !important;
          height: 40px !important;
          width: 290px !important;
        }
      }
      .search_text {
        box-sizing: border-box;
        padding-left: 10px;
        // position: relative;
        // left: 400px;
        // top: -33px;
        flex: 1;
        .el-input {
          width: 50%;
          flex: 1;
        }
        .el-button--primary {
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
